<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="format-detection" content="telephone=no" />
    <script type="text/javascript" src="http://${staticHost}/js/jquery.js"></script>
    <title>商品列表</title>
    <style type="text/css">
        html {
            font-size: 62.5%;
            color: #5f5f5f;
        }

        .section_top {}

        .section_top ul {
            list-style: none;
            padding: 0;
            font-size: 0;
            border-bottom: .1rem solid #e4e4e4;
        }

        .section_top ul li {
            display: inline-block;
            width: 25%;
            height: 3rem;
            line-height: 3rem;
            font-size: 1.4rem;
            text-align: center;
        }

        .section_container {}

        .section_container ul {
            padding: 0;
            list-style: none;
        }

        .section_container ul li {
            padding: .3rem;
            margin-top: 1rem;
        }

        .section_container ul li .left {
            float: left;
            height: 9rem;
            width: 9rem;
            background: #e4e4e4;
        }

        .section_container ul li .left img {
            width: 100%;
            height: auto !important;
        }

        .section_container ul li .right {
            margin-left: 9.5rem;
            height: 9rem;
            border-bottom: .1rem solid #e4e4e4;
        }

        .section_container ul li .right > span {
            display: block;
            font-size: 1.2rem;
        }

        .section_container ul li .right >.title {
            height: 2rem;
        }

        .section_container ul li .right >.description {
            height: 4rem;
            font-size: 1rem;
        }

        .section_container ul li .right >.money {
            height: 2rem;
            color: #f44336;
        }

        .section_container ul li .right >.evaluate {
            height: 1rem;
            line-height: 1rem;
            font-size: 1rem;
        }
    </style>
</head>

<body>
<section class="section_top">
    <ul>
        <li>综合</li>
        <li>品牌</li>
        <li>名家</li>
        <li>类型</li>
    </ul>
</section>
<section class="section_container">
    <ul>
        <li id="1">
            <div class="left">
                <img src="http://${staticHost}/images/product1.jpg">
            </div>
            <div class="right">
                <span class="title">人间失格</span>
                <span class="description">【日】太宰治</span>
                <span class="money">￥22.1</span>
                <span class="evaluate">30条评价</span>
            </div>
        </li>
        <li id="2">
            <div class="left">
                <img src="http://${staticHost}/images/product2.jpg">
            </div>
            <div class="right">
                <span class="title">月亮与六便士</span>
                <span class="description">【英】毛姆</span>
                <span class="money">￥32.1</span>
                <span class="evaluate">80条评价</span>
            </div>
        </li>
        <li id="3">
            <div class="left">
                <img src="http://${staticHost}/images/product3.jpg">
            </div>
            <div class="right">
                <span class="title">摆渡人</span>
                <span class="description">【英】克莱尔</span>
                <span class="money">￥20.3</span>
                <span class="evaluate">301条评价</span>
            </div>
        </li>
        <li id="4">
            <div class="left">
                <img src="http://${staticHost}/images/product4.jpg">
            </div>
            <div class="right">
                <span class="title">岛上书店</span>
                <span class="description">【美】加泽文</span>
                <span class="money">￥19.6</span>
                <span class="evaluate">381条评价</span>
            </div>
        </li>
        <li id="5">
            <div class="left">
                <img src="http://${staticHost}/images/product5.jpg">
            </div>
            <div class="right">
                <span class="title">教父三部曲典藏版</span>
                <span class="description">马里奥</span>
                <span class="money">￥96.6</span>
                <span class="evaluate">2301条评价</span>
            </div>
        </li>
        <li id="6">
            <div class="left">
                <img src="http://${staticHost}/images/product6.jpg">
            </div>
            <div class="right">
                <span class="title">百年孤独</span>
                <span class="description">马尔克斯</span>
                <span class="money">￥55</span>
                <span class="evaluate">315条评价</span>
            </div>
        </li>
    </ul>
</section>
</body>
<script type="text/javascript">
    $(function(){
        $(".section_container").find("li").click(function(){
            var id=this.id;
            $(window).attr('location','/public/product/productDetail?id='+id);
        });
    });
</script>
</html>
